﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link rel = "Stylesheet" type = "text/css" href = "default.css" />
    <!--<script type = "text/javascript" src = "default.js"></script> -->
    <script type = "text/javascript">
        var dragging = false;
        var startTop, startLeft;
        var top, left;
        
        var cordX;
        var cordY;
        var min_zoom = 1;
        var max_zoom = 7;
        var zoom = 1;
        var centerX = 0;
        var centerY = 0;
        var outerHeight = 400;
        var outerWidth = 1200;
        var innerDivLeft, innerDivTop;
        var cellWidth = 600;
        var cellHeight = 300;
        var numHeight = Math.floor(outerHeight / cellHeight);
        var numWidth = Math.floor(outerWidth / cellWidth);
        var numCellLoad = ((numHeight > numWidth) ? numHeight: numWidth) + 4;
        var numImg = Math.pow(4, zoom);
        
        var pinArr = [];
        var numImgS = Math.pow(2, zoom);
                
        var imgHeight = 180/numImgS;
        var imgWidth = 360/numImgS;
        
        var innerDivWidth = Math.pow(2, zoom)* 600;
        var innerDivHeight = Math.pow(2, zoom) * 300;
        var cursorX, cursorY;
        function init(){
            
            window.cancelBubble = true;
            setDiv(outerWidth, outerHeight);
            setInfor();
            var outerDiv = document.getElementById("outerDiv");
            var innerDiv = document.getElementById("innerDiv");
            outerDiv.onmousedown = startDrag;
            outerDiv.onmousemove = processMove;
            outerDiv.onmouseup = stopDrag;
            document.onmouseup = stopDrag;
            outerDiv.ondragstart = function(){return false;}
            outerDiv.onmousewheel = mousewheel;
            
            innerDiv.onmousemove = moveFoInner;
            //innerDiv.onclick = pushPin;
            
            display();
        }
        
        function display()
        {
            var prefixPath = "img/zoom"+zoom;
            var innerDiv = document.getElementById("innerDiv");
            var innerHeight = stripPx(innerDiv.style.height);
            var innerWidth = stripPx(innerDiv.style.width);
            
            if(zoom == 0){
                var idImg = "z0_C0_0";
                var img = document.getElementById(idImg);
                if(!img){
                    img = document.createElement("img");
                    img.src = prefixPath + "/" + idImg +".jpg";
                    img.style.position = "absolute";
                    img.style.left = "0px";
                    img.style.top = "0px";
                    img.setAttribute("id", idImg);
                    img.style.zIndex = -1;
                    innerDiv.appendChild(img);
                    
                }
            } else{
                var imgVisible = getVisibleImg();
                var idImg;
                for(i = 0; i < imgVisible.length; i++){
                    idImg = "z"+ zoom+"_"+"C"+imgVisible[i][0]+"_"+imgVisible[i][1];
                    var img = document.getElementById(idImg);
                    if(!img && (Math.abs(imgVisible[i][0]) <= 180) && (Math.abs(imgVisible[i][1]) <= 90) ) {
                        img = document.createElement("img");
                        img.src = prefixPath + "/" + idImg + ".jpg";
                        img.style.position = "absolute";
                        img.style.left = (imgVisible[i][0] + 180 - imgWidth/2)*innerDivWidth/360 + "px" ;
                        img.style.top = ( 90 -imgVisible[i][1] - imgHeight/2)*innerDivHeight/180 + "px" ;
                        img.setAttribute("id", idImg);
                        //img.style.filter = "alpha(opacity = 50)";
                        img.style.zIndex = -1;
                        img.onmousemove = function(){return false;}
                        //img.style.border = "1px solid yellow";
                        innerDiv.appendChild(img);
                        
                        
                    }
                }
            }
           
        }
        
        function getVisibleImg()
        {
            var imgVisible = [];
            numImgS = Math.pow(2, zoom);
                
            imgHeight = 180/numImgS;
            imgWidth = 360/numImgS;
                
            var tempX = Math.floor(centerX / imgWidth);
            var tempY = Math.floor(centerY / imgHeight);
            
            var imgCenterX, imgCenterY;
            if(centerX >= 0){
                imgCenterX = imgWidth * tempX + imgWidth / 2;
            } else{
                imgCenterX = imgWidth * tempX + imgWidth / 2;
            }
            if(centerY >= 0) {
                imgCenterY = imgHeight * tempY + imgHeight / 2;
            } else {
                imgCenterY = imgHeight * tempY + imgHeight / 2;
            }
            //imgVisible[0] = [imgCenterX, imgCenterY];
            var counter = 0;
            var startX = imgCenterX - imgWidth*(Math.floor(numCellLoad/2));
            var startY = imgCenterY + imgHeight*(Math.floor(numCellLoad/2));
            for(i = 0; i < numCellLoad; i++){
                for(j = 0; j < numCellLoad; j++){
                    imgVisible[counter++] = [startX +i*imgWidth, startY - j*imgHeight];
                }
            }
            
            return imgVisible; 
        }

        function mousewheel(event){
            if(!event) event = window.event;
            
            
            if((zoom == min_zoom) && (event.wheelDelta < 0)){
                return;
            } 
            if((zoom == max_zoom) && (event.wheelDelta > 0))
            {
                return;
            }
            zoom += event.wheelDelta/120;

            setDiv(outerWidth, outerHeight);
            removeAllImage();
            
            display();
            showInfor();
        }
        
        function setInfor(){
            var inforDiv = document.getElementById("inforDiv");
            var temp = outerHeight + 60;
            inforDiv.style.left = "0px";
            inforDiv.style.top = "50px";
            
            
        }
        function showInfor(){
            var centerText = document.getElementById("centerText");
            var zoomText = document.getElementById("zoomText");
            var imgNumText = document.getElementById("imgNumText");
            var cursorText = document.getElementById("cursorText");
            
            cursorText.value = cursorX + "   " + cursorY;
            
            centerText.value = centerX + "   " + centerY;
            
            zoomText.value = zoom;
            
            var imgs = innerDiv.getElementsByTagName("img");
            imgNumText.value = imgs.length;
        }
        function removeAllImage(){
            if(innerDiv.hasChildNodes()){
                while(innerDiv.childNodes.length >=1){
                    innerDiv.removeChild(innerDiv.firstChild);
                }
            }
        }
        
        function startDrag(event)
        {
            if(!event) event = window.event;
            startTop = event.clientY;
            startLeft = event.clientX;

            var innerDiv = document.getElementById("innerDiv");
            top = stripPx(innerDiv.style.top);
            left = stripPx(innerDiv.style.left);
        
            innerDiv.style.cursor = "-moz-grab";
            dragging = true;
            return false;
        }

        function processMove(event)
        {
            if(!event) event = window.event;
            var innerDiv = document.getElementById("innerDiv"); 
            var outerDiv = document.getElementById("outerDiv");
            if(dragging)
            {
                var centerX_text = document.getElementById("centerX");
                var centerY_text = document.getElementById("centerY");
                innerDiv.style.top = parseFloat(top) + (event.clientY - startTop);
                innerDiv.style.left = parseFloat(left) + (event.clientX - startLeft);
                centerX = (cordX - parseFloat(innerDiv.style.left))*360/innerDivWidth;
                centerY = (parseFloat(innerDiv.style.top) - cordY)*180/innerDivHeight;
                display();//Get Images base on centerX_centerY and place it to position on innerDiv
            }
            showInfor();// show information on inforDiv
        }

        function stopDrag(event)
        {
            var innerDiv = document.getElementById("innerDiv");
            innerDiv.style.cursor = "";
            dragging = false;
        }

        function pushPin(event){    
            if(!event) event = window.event;
            var innerDiv = document.getElementById("innerDiv");
            var pinId = "ping" + pinArr.length;
            var pin = document.createElement("img");
            var pinX, pinY;
            pin.setAttribute("id", pinId);
            pin.src = "img/pin.png";
            pinX = (cursorX + 180)*innerDivWidth/360;
            pin.style.left = pinX + "px";
            pinY = (90-cursorY) * innerDivHeight/180;
            pin.style.top = pinY + "px";
            pin.style.position = "absolute";
            pin.alt = "pin"+cursorX+":"+cursorY;
            innerDiv.appendChild(pin);
        }
        function setDiv(outerWidth, outerHeight)
        {
            var innerDiv = document.getElementById("innerDiv");
            var outerDiv = document.getElementById("outerDiv");
            
            innerDivWidth = Math.pow(2, zoom)* 600;
            innerDivHeight = Math.pow(2, zoom) * 300;
            //innerDivWidth = innerWidth;
            //innerDivHeight = innerHeight;
            outerDiv.style.width = outerWidth + 'px';
            outerDiv.style.height = outerHeight + 'px';
            
            innerDiv.style.width = innerDivWidth+ 'px';
            innerDiv.style.height = innerDivHeight + 'px';
            innerDiv.style.top = (outerHeight - innerDivHeight)/2 + centerY*innerDivHeight/180 + 'px';
            innerDiv.style.left = (outerWidth - innerDivWidth)/2 - centerX*innerDivWidth/360 + 'px';
            
            innerDivLeft = parseFloat(innerDiv.style.left);
            innerDivTop = parseFloat(innerDiv.style.top);
            
            cordY = (outerHeight - innerDivHeight)/2;
            cordX = (outerWidth - innerDivWidth)/2;
            
        }
        function moveFoInner(event){
            if(!event) event = window.event;
            cursorX = event.offsetX*360/innerDivWidth - 180;
            cursorY = 90 - event.offsetY*180/innerDivHeight;
            //cursorX = event.x;
            //cursorY = event.y;
            showInfor();
        }
        
        function stripPx(value)
        {
            if(value == "") return 0;
            return parseFloat(value.substring(0, value.length - 2));
        }        
    </script> 
    
</head>
<body onload = "init();" class = "body">
    <h1>My Google map</h1>
    <div id = "outerDiv" class = "outerDiv">
        <div id = "innerDiv" class ="innerDiv">
        </div>
    </div>
    <div id = "inforDiv" class ="inforDiv">
        <label id = "centerLabel" >center</label>
        <input type = "text" id = "centerText" class ="centerText" /><br />
        <label id = "zoomLabel">zoom</label>
        <input type = "text" id = "zoomText" class="zoomText" /><br />
        <label id = "cursorLabel">cursor</label>
        <input type = "text" id = "cursorText" class ="cursorText"/><br />
        <label id = "imgNumLabel" >image loaded</label>
        <input type = "text" id = "imgNumText" class="imgNumText" />
    </div>
    
</body>
</html>